<template>
  <div v-loading="loading">
    <el-card class="comment" shadow="never">
      <div class="doc">
        <el-descriptions title="文件信息" :column="1" border>
          <el-descriptions-item label="文件名称">
            <img :src="imgPath" alt="">
            <span>{{ file.filename }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="文件大小">{{ fileSize }}</el-descriptions-item>
          <el-descriptions-item label="关键词">
            <el-tag size="small" v-for="item, index in fileTag" :key="index" class="tag">{{ item.name }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="上传者">{{ file.username }}</el-descriptions-item>
          <el-descriptions-item label="分享时间">{{ file.updateTime }}</el-descriptions-item>
        </el-descriptions>
      </div>
      <div class="op-btn">
        <el-button type="primary" @click="download">下载</el-button>
        <el-button type="success" @click="saveCloud">保存到我的云盘</el-button>
      </div>
      <div class="message">温馨提示：含有敏感词的评论将不会展示</div>
      <div class="title">
        <span>评论</span>
        <span>{{ commentLen }}</span>
      </div>
      <div class="input">
        <img src="@/assets/comment.avif" alt="">
        <input type="text" placeholder="宫廷玉液酒，评论走一走" v-model="content">
        <button @click="addMainComment" class="fabu">发布</button>
      </div>
      <div class="content" v-for="item in commentList" :key="item.id">
        <!-- 回复文件·评论· -->
        <div class="author">
          <img :src="item.avatar" alt="">
          <span class="name">{{ item.username }}</span>
          <!-- <span class="idtify">up</span> -->
        </div>
        <div class="comment-text">
          <div class="text">
            {{ item.content }}
          </div>
          <div class="date-reply">
            <span class="date">{{ item.createTime }}</span>
            <span class="reply" @click="toReply(item)">回复</span>
          </div>

          <div v-for="i in (item.showMore == false ? item.commentUserList.slice(0, 3) : item.commentUserList)"
            :key="i.id">
            <!-- 回复一级评论 -->
            <div class="son-comment" v-if="i.pid == i.ppId">
              <div class="head">
                <img :src="i.avatar" alt="">
                <span class="name">{{ i.username }}</span>
                <span class="son-text">
                  {{ i.content }}
                </span>
              </div>
              <div class="date-reply">
                <span class="son-date">{{ i.createTime }}</span>
                <span class="reply" @click="replyName(item, i)">回复</span>
              </div>
            </div>
            <!-- 回复二级评论 -->
            <div class="reply-comment" v-else>
              <img :src="i.avatar" alt="">
              <span class="name">{{ i.username }}</span>
              <span>回复 </span>
              <span>@{{ i.pusername }}:</span>
              <span>{{ i.content }}</span>
              <div class="date-reply">
                <span class="son-date">{{ i.createTime }}</span>
                <span class="reply" @click="replyName(item, i)">回复</span>
              </div>
            </div>
          </div>
          <span class="more" v-if="item.commentUserList.length > 3" @click="toMore(item)">共{{ item.commentUserList.length
          }}条回复,
            点击<span v-if="item.showMore == false">查看</span>
            <span v-else>收起</span>
          </span>
        </div>

        <!-- 回复框 -->
        <div class="reply-box" v-if="item.replyBox">
          <div class="input">
            <img src="@/assets/comment.avif" alt="">
            <input type="text" :placeholder="replyPlaceholder" style="width:330px;" v-model="item.replyText">
            <button @click="sendText(item)" class="fabu">发布</button>
          </div>
        </div>
      </div>
      <el-dialog :visible.sync="isMove">
        <MoveFile :file="moveFile" :t="t" :type="2"></MoveFile>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import MoveFile from '@/components/move-file'

export default {
  name: 'commentVue',
  data() {

    return {
      // 路由跳转的文件id 的对象信息
      fileId: 0,
      file: {},
      fileTag: [],
      // 评论的文本内容
      content: '',
      // 文件的评论列表
      commentList: [],
      // 回复框的值
      replyPlaceholder: "",
      // 回复的id
      replyId: 0,
      // 评论总条数
      commentLen: 0,
      // 评论是否可看
      commentVisible: true,
      // 是否展示保存弹窗
      isMove: false,
      // 移动的文件
      moveFile: null,
      // 时间戳
      t: null,
      // 是否加载
      loading: false

    }
  },
  computed: {
    imgPath() {
      if (this.file.fileType) {
        // const fileType = this.commentItem.fileType
        const fileNames = ['', 'video', 'mp3', 'img', 'pdf', 'word', 'excel', 'txt', 'code', 'zip', 'ppt', 'folder'];
        const imgName = fileNames[this.file.fileType];
        return require(`@/common/image/${imgName}.png`)
      } else {
        return ''
      }
    },
    fileSize() {
      if (this.file.fileSize) {
        let b = this.file.fileSize
        if (b / 1024 < 1) {
          return Math.ceil(b) + "b"
        } else if (b / 1024 / 2024 < 1) {
          return Math.ceil(b / 1024) + "kb"
        } else if (b / 1024 / 1024 / 1024 < 1) {
          return Math.ceil(b / 1024 / 1024) + "M"
        } else {
          return Math.ceil(b / 1024 / 1024 / 1024) + "G"
        }
      } else {
        return ''
      }
    },
    // 计算关键词
    keyWord() {
      let word = this.fileTag
      let res = ""
      word.forEach((item) => {
        res = res + item.name + "、"
      })
      return res.substring(0, res.length - 1)
    }
  },
  methods: {
    toReply(item) {
      this.commentList.forEach(i => {
        i.replyBox = false
      })
      this.replyId = 0
      item.replyBox = true
      this.replyPlaceholder = '回复 @' + item.username
    },
    replyName(item, val) {
      this.commentList.forEach(i => {
        i.replyBox = false
      })
      item.replyBox = true
      this.replyId = val.id
      this.replyPlaceholder = '回复 @' + val.username
    },
    sendText(item) {
      // console.log(item.id)
      // console.log(item.replyText)

      if (item.replyText.length == 0) {
        this.$message.error("请输入回复内容")
      } else {
        if (this.replyId == 0) {
          this.postReply(item.id, item.replyText)
        } else {
          this.postReply(this.replyId, item.replyText)
        }
        item.replyBox = false
      }

      setTimeout(() => {
        this.getCommentList(this.fileId)
      }, 500);
    },
    addMainComment() {
      if (this.content.length == 0) {
        this.$message.error("你还没有输入内容！")
      } else {
        this.postComment(this.fileId, this.content)
      }
    },
    // 添加评论
    async postComment(fileId, content) {
      let res = await this.$store.dispatch("postComment", {
        fileId: fileId,
        content: content
      })
      // console.log(res)
      if (res.success) {
        this.$message.success("评论成功！")
        this.content = ''
      } else {
        this.$message.info("评论失败！")
      }
      this.getCommentList(this.fileId)
    },

    // 获取评论列表
    async getCommentList(fileId) {
      let res = await this.$store.dispatch("getCommentList", fileId)
      if (!res.success) {
        this.$message(res.message)
      }
      // console.log(res.data)
      this.commentLen = 0
      res.data.forEach(item => {
        item.replyBox = false
        item.replyText = ''
        item.showMore = false
        this.commentLen += item.commentUserList.length
      });
      this.commentList = res.data
      this.commentLen += this.commentList.length
      // console.log(this.commentList)
    },
    // 添加回复
    async postReply(pId, content) {
      // console.log(content)
      let res = await this.$store.dispatch("postReply", {
        pId: pId,
        content: content
      })
      if (res.success) {
        this.$message.success("回复成功！")
      } else {
        this.$message.error("回复失败!")
      }
    },
    // 展示更多评论
    toMore(item) {
      item.showMore = !item.showMore
    },
    // 通过文件id查询 文件信息
    async getFileData() {
      let res = await this.$store.dispatch("getFile", this.fileId)
      // console.log(res.data);
      if (!res.success) {
        this.$message.error("获取文件信息失败")
      }
      if (res.data.commentType != 1) {
        this.$message.info("该文件评论不可查看")
        this.commentVisible = false
        this.$router.go(-1);
      } else {
        this.file = res.data
      }

    },
    // 通过文件id 获取 关键词
    async getFileTag() {
      let res = await this.$store.dispatch("getFileTag", this.fileId)
      if (!res.success) {
        this.$message.error("获取关键词")
      }
      this.fileTag = res.data
      console.log(res.data)
    },
    // 下载文件
    download() {
      this.$bus.$emit("busDownloadParams", this.file)
    },
    // 保存云盘
    saveCloud() {
      this.moveFile = this.file
      this.isMove = true
    }

  },
  created() {
    this.fileId = this.$route.query.fileId



  },
  mounted() {
    this.loading = true
    this.getFileData(this.fileId)
    if (this.commentVisible) {
      this.getFileTag(this.fileId)
      this.getCommentList(this.fileId)
    }
    this.loading = false
  },
  components: {
    MoveFile
  }
}
</script>

<style  scoped>
.comment {
  /* background: #ccc; */
  width: 60%;
  margin: 0 auto;
}

.doc {
  position: relative;
}

.doc img {
  width: 50px;
  vertical-align: middle;
}

.doc span {
  vertical-align: middle;
}

.op-btn {
  margin: 10px;
  text-align: right;
}

.tag {
  margin-right: 10px;
}

.fileSize {
  margin: 0 20px;
  ;
}

.keyWord {
  margin-right: 300px;
}

.message {
  margin: 10px;
}

.title {
  margin-top: 20px;
}

.title span:nth-child(1) {
  font-size: 20px;
  vertical-align: middle;

}

.title span:nth-child(2) {
  font-size: 14px;
  padding: 10px;
  color: #9499A0;
  vertical-align: middle;
}

.input {
  margin: 20px 15px;
}

.input img {
  width: 40px;
  height: 40px;
  vertical-align: middle;
  margin-right: 20px;
}

.input input,
.fabu {
  border: 1px solid #fff;
  background: rgb(241, 242, 243);
  border-radius: 5px;
  font-size: 13px;
  color: #9499A0;
  font-weight: 500;
  vertical-align: middle;
}

.input input:hover,
input:focus {
  border: 1px solid #ccc;
  background: #fff;
  outline: none;
}

.input input {
  width: 400px;
  padding: 15px 10px;
}

.input button {
  background: rgb(127, 214, 245);
  color: #fff;
  font-size: 14px;
  margin-left: 10px;
  padding: 12px 20px;
}

.input button:hover {
  background: rgb(0, 174, 236);
}

.content {
  margin-left: 15px;
  margin-top: 30px;
}

.author img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  vertical-align: middle;
  object-fit: cover;
  /* 图片按比例缩放并裁剪以填满容器 */
  object-position: center;
  /* 图片在容器中居中显示 */
}

.name {
  color: #61666d;
  margin: 0px 15px;
  font-size: 14px;
  vertical-align: middle;
}

.idtify {
  background: rgb(255, 102, 153);
  color: #fff;
  padding: 2px;
  font-size: 13px;
  font-weight: 500;
  display: inline-block;
  height: 10px;
  line-height: 6px;
  border-radius: 3px;
}

.comment-text {
  margin-left: 55px;
}

.text {
  margin-top: 5px;
  color: #18191C;
}

.date-reply {
  color: #9499A0;
  margin-top: 5px;
  font-size: 14px;
}

.son-date {
  margin-left: 40px;
}

.reply {
  margin-left: 15px;

}

.reply:hover {
  color: rgb(0, 174, 236);
  cursor: pointer;
}

.son-comment {
  margin-top: 10px;
}

.reply-comment {
  margin-top: 10px;
}

.head img,
.reply-comment img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  vertical-align: middle;
}

.son-text {
  vertical-align: middle;
}

.reply-comment span:nth-child(4) {
  color: #008AC5;
  cursor: pointer;
}

.more {
  color: #61666d;
  font-size: 14px;
  margin-top: 10px;
  /* margin-left: 5px; */
  cursor: pointer;
}

.more:hover {
  color: rgb(0, 174, 236);
}
</style>>

